import "./index.less";
import {Fetch} from  '../../libs/';
import {Url, md5Url} from  '../../libs/Url';
import {connect} from 'react-redux';
import {fetch} from  '../../stores/action';
import {parseSearch} from  '../../libs/utils';
import {Scrollbars} from 'react-custom-scrollbars'
import CSS from '../../libs/CSS'

class Notice extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            active: 1,
            photo: 1
        }
    }

    componentDidMount() {
        const {dispatch} = this.props;
        let clientInfo = parseSearch();
        if (clientInfo && clientInfo.clientid) {
            Fetch(Url.GET_CLASS, {body: {deviceid: clientInfo.clientid}})
                .then((res)=> {
                    if (res['class'] && res['class'].classid) {
                        clientInfo['class'] = res['class'];
                        clientInfo['school'] = res['school'];
                        clientInfo['device'] = res['device'];
                        clientInfo['classroom'] = res['classroom'];
                        // dispatch(clientInfoSet(clientInfo));
                        dispatch(fetch({url: Url.ANNOUNCE, classid: res['class'].classid}));
                    } else {
                        alert('设备码没有跟班级对应，请核验!')
                    }
                })
                .catch(e=> {
                    console.log(e)
                })
        } else {
            alert('设备码不合法，请核验!')
        }
    }

    render() {
        let data = this.props[md5Url.ANNOUNCE];
        data = data.announces ? data : {announces: [{}]};
        return (
            <div className="notice clearfix" style={{}}>
                <div className="panel-item panel1">
                    <a className="title" href="javascript:void(0);"
                       style={{
                           background: 'url(' + require('./../../imgs/home/home_titBg1.png') + ')',
                           width: (4.5 * 326 / 67) + 'rem',
                           backgroundSize: '100% 100%',
                       }}>公告通知</a>
                    <div className="black-board"
                         style={{
                             background: 'url(' + require('./../../imgs/home/home_notice_bg.png') + ')',
                             backgroundSize: '100% 100%',
                             height: (window.innerHeight - 45 - 30 - 40 * 2 - 180 - 120 - 15)
                         }}>

                        <div className="tabs-content">
                            <p style = {{paddingBottom: CSS.pixel(30)}}>{data.announces[0].title}</p>
                            <p>学校办 <br/>
                                <span>{data.announces.intime ? '2016年12月30日' : Moment(data.announces[0].intime).format('YYYY年MM月DD日')}</span>
                            </p>
                        </div>

                    </div>
                </div>
                <div className="panel-item panel3">
                    <div className="news-board"
                         style={{
                             backgroundSize: '100% 100%',
                             height: '100%'
                         }}>
                        {
                            data.announces.map((item, index)=> {
                                return <div key={index} className="item">
                                    <div>{item.classify ? item.classify.name : ''}:</div>
                                    <p>{CSS.textLimit(item.title, 30)}</p>
                                </div>
                            })
                        }
                    </div>
                </div>
            </div>
        )
    }
}

const select = state => {
    return {
        clientInfo: state.clientInfo,
        [md5Url.ANNOUNCE]: state.fetchBySubject[md5Url.ANNOUNCE]
    }
};

export default connect(select)(Notice)